import React from 'react';

import './Service.css'
import { Pagination } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

const Service = () => {

    return (
        <div className="life-service">
            <Swiper className='serviceSwiper-container'
                modules={[Pagination]}
                pagination={{ clickable: true, type: "bullets" }}
            >
                <SwiperSlide>
                    <div className="service-items">
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-Uxing"></use>
                            </svg>
                            <div className="service-plant">试用领取</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-qiandai"></use>
                            </svg>
                            <div className="service-plant">天天领钱</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-huangguan"></use>
                            </svg>
                            <div className="service-plant">店铺会员</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-hexiaokaquan"></use>
                            </svg>
                            <div className="service-plant">领券中心</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-shouhuodizhi"></use>
                            </svg>
                            <div className="service-plant">收货地址</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-guanfangkefu"></use>
                            </svg>
                            <div className="service-plant">官方客服</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-wodekuaidi"></use>
                            </svg>
                            <div className="service-plant">我的快递</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-wodepingjia"></use>
                            </svg>
                            <div className="service-plant">我的评价</div>
                        </div>
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className="service-items">
                    <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-hexiaokaquan"></use>
                            </svg>
                            <div className="service-plant">领券中心</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-xianzhi"></use>
                            </svg>
                            <div className="service-plant">闲置换钱</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-chonghuafei"></use>
                            </svg>
                            <div className="service-plant">充话费</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-huabei"></use>
                            </svg>
                            <div className="service-plant">花呗</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-wodepingjia"></use>
                            </svg>
                            <div className="service-plant">我的评价</div>
                        </div>
                         <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-zhuti"></use>
                            </svg>
                            <div className="service-plant">主题换肤</div>
                        </div>
                        <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-dingyue1"></use>
                            </svg>
                            <div className="service-plant">我的订阅</div>
                        </div>
                         <div className="service-item">
                            <svg className="icon iconfont" aria-hidden={true}>
                                <use xlinkHref="#icon-paimai"></use>
                            </svg>
                            <div className="service-plant">阿里拍卖</div>
                        </div> 
                    </div>
                </SwiperSlide>

            </Swiper>
        </div>
    )
}

export default Service